<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>jQ轮播图</title>
    <style>
        .banner{
            width:1210px;
            height:450px;
            padding:10px;
            margin:0px auto;
            position: relative;
            border: 1px solid green;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .list li{
            position: absolute;
            top:0px;
        }
        .dictor{
            width:200px;
            height:30px;
            position: absolute;
            bottom:30px;
            left:20px;
            background-color:green;
            border-radius:10px;
            z-index: 10;
            display: flex;
            justify-content: space-between;
            padding:0px 10px;
        }
        .dictor li{
            width:25px;
            height:25px;
            line-height:25px;
            text-align:center;
            /*border-radius:50%;*/
            background-color:red;
            margin-top:3px;
        }
        .dictor li.active{
            background-color:purple;
        }
        .banner div{
            position:absolute;
            bottom:30px;
            right:20px;
            color:white;
            font-size:30px;
        }
        .banner div span{
            width:40px;
            height:40px;
            line-height:40px;
            text-align:center;
            display: inline-block;
            border: 1px solid coral;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div class="banner">
    <ul class="list">
        <li><img src="./img/001.jpg" alt=""></li>
        <li><img src="./img/002.jpg" alt=""></li>
        <li><img src="./img/003.jpg" alt=""></li>
        <li><img src="./img/004.jpg" alt=""></li>
    </ul>
    <ul class="dictor">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
</div>
</body>
<script src="./jquery.js"></script>
</html>
<script>

var index = 0;
// 上一张图片
function prevImg(){
    index = index == 0 ? 3 : index - 1;
    showImg();
}

// 下一张
function nextImg(){
    console.log('nextimg='+index);
    index = index == 3 ? 0 : index + 1 ;
    showImg();
}

// 自动切换的
var timer = setInterval(nextImg,1000);

function showImg(){
    $('.list li').eq(index).stop().fadeIn(200).siblings().stop().fadeOut();
    $('.dictor li').eq(index).addClass('active').siblings().removeClass('active');
}

// 当鼠标放在指示灯会显示当前的图片
$('.banner').mouseover(function(){
    clearInterval(timer);
    timer = null;
    $('.dictor li').mouseover(function(){
         index = $(this).index();
         showImg();
    })  
})

// 当鼠标移走的时候会显示下一张图片
$('.banner').mouseout(function(){
    if(timer) return;
    timer = setInterval(nextImg,1000);
})

// 点击切换上一张或者下一张
$('span').click(function(ev){
    ev.stopPropagation();
    if($(this).hasClass('next')){
        nextImg();
    }else{
        prevImg();
    }
})


</script>